<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#f7f7f7', color: '#606266' }"
      :data="tableList"
      :span-method="objectSpanMethod"
      size="mini"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        v-for="(sku, index) in skus"
        :key="String(index)"
        :resizable="false"
        align="center"
        :prop="'sku' + index"
        :label="sku.value"
      >
      </el-table-column>

      <el-table-column
        align="center"
        v-for="item in natures"
        :resizable="false"
        :key="item"
        :label="item"
      >
        <template slot-scope="">
          <el-form>
            <el-form-item>
              <el-input v-show="true" size="mini" />
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ant-sku",
  props: {
    natures: Array,
    skus: Array
  },
  data() {
    return {
      tableList: []
    };
  },
  computed: {},
  methods: {
    // 拼接参数方法
    getList() {
      let _ = this;

      var len = _.skus.length;
      var listSize = 1; // 总条数
      for (var i = 0; i < len; i++) {
        listSize = listSize * _.skus[i].leaf.length;
        console.log("计算出了总条数", listSize);
      }
      for (var m = 0; m < listSize; m++) {
        console.log("准备拼接第" + m + "条数据");
        var s = {};
        var x = 1;
        for (var n = 0; n < len; n++) {
          if (n > 0) {
            x = x * _.skus[n - 1].leaf.length;
          }
          var k = parseInt((m * x * _.skus[n].leaf.length) / listSize);
          s["sku" + n] = _.skus[n].leaf[k % _.skus[n].leaf.length].value;
          console.log(s);
        }
        _.tableList.push(s);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);

      // 封装返回值
      var req = {
        rowspan: 1,
        colspan: 1
      };

      let _ = this;
      // 总长度
      var len = _.skus.length;
      // 如果超过了长度，直接返回
      if (columnIndex >= len) {
        return req;
      }
      var listSize = 1; // 总条数
      for (var i = 0; i < len; i++) {
        listSize = listSize * _.skus[i].leaf.length;
      }
      var x = 1;
      for (var m = 0; m <= columnIndex; m++) {
        // 计算合并数量
        x = x * _.skus[m].leaf.length;
        // 判断要合并多少行
        var y = listSize / x;
        // 判断是否是需要合并的行
        if (rowIndex % y == 0) {
          req.rowspan = y;
        } else {
          req.rowspan = 0;
          req.colspan = 1;
        }
      }
      console.log(req);
      return req;
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
/deep/.el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}
/deep/el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #f2f2f2;
}

/deep/.el-table--border,
.el-table--group {
  border-color: #f2f2f2;
}

/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #f2f2f2;
}

/deep/.el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid #f2f2f2;
}

/deep/.el-table--border td,
.el-table--border th {
  border-right: 1px solid #f2f2f2;
}
</style>
